// 近期的博客
import React from "react";
import { Card } from "antd";

import { dateFormat } from "../../lib/utils";
import "../CSS/RecentBlogs.less";

interface RecentBlogsProps {
    recentBlogs: Blog[];
}

interface LabelProps{
    title: string;
    blogId: string;
    time: string;
}

function BlogLabel(props: LabelProps) {
    const { title, time, blogId } = props;
    return (
        <a className="recent-blog-container" href={`/content/${blogId}`}>
            <span className="label-title">{title}</span>
            <br />
            <span className="label-time">{time}</span>
        </a>
    );
}

function RecentBlogs(props: RecentBlogsProps) {
    const { recentBlogs } = props;
    return (
        <Card title="最近文章" bordered={false}>
            {recentBlogs.length && recentBlogs.map((blog) => (
                <BlogLabel
                    key={blog._id}
                    title={blog.title}
                    blogId={blog._id}
                    time={dateFormat(new Date(blog.createDate), 'yyyy-MM-dd hh:mm:ss')}
                />
            ))}
        </Card>
    );
}

export default RecentBlogs;
